<template>
  <div>
    <div class="add">
      <h1>用户修改</h1>
      <div class="formBox">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              show-password
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="ruleForm.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
              <el-radio label="保密"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即修改</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        email: '',
        mobile: '',
        gender: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'change',
          },
        ],
        mobile: [
          {
            validator: this.checkMobile,
            trigger: 'change',
          },
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      },
    }
  },
  methods: {
    // 校验手机号
    checkMobile(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('手机号不规范'))
      } else {
        callback()
      }
      callback()
    },
    // 将对象转成字符串的方法
    objToStr(obj) {
      let arr = []
      for (let attr in obj) {
        arr.push(attr + '=' + obj[attr])
      }
      return arr.join('&')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          // 复制新数据，但不要影响源数据 - 深克隆/浅克隆
          let obj = JSON.parse(JSON.stringify(this.ruleForm))
          // console.log(obj)
          // obj.gender = '哈哈'
          // console.log(this.ruleForm)
          obj.gender =
            obj.gender === '男' ? '1' : obj.gender === '女' ? '2' : '3'
          // console.log(obj)
          this.$http
            .put('/api/moduser/' + obj.id, this.objToStr(obj))
            .then((res) => {
              // console.log(res)
              if (res.errNo === 0 && res.message === 'success') {
                this.$message({
                  message: '恭喜你，修改成功',
                  type: 'success',
                })
                this.$router.push('/dashboard/user/index')
              } else {
                this.$message.error('修改失败')
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  created() {
    // console.log(this.$route.query)
    // 获取到id
    let id = this.$route.query.id
    // 根据id发送请求或用户详情 - 配置代理
    this.$http.get('/api/userinfo/' + id).then((res) => {
      // console.log(res)
      if (res.errNo === 0 && res.message === 'success') {
        this.ruleForm = res.userInfo
        this.ruleForm.gender =
          this.ruleForm.gender === '1'
            ? '男'
            : this.ruleForm.gender === '2'
            ? '女'
            : '保密'
      }
    })
  },
}
</script>
    
<style lang="scss" scoped>
.add {
  color: #fff;
  h1 {
    margin-left: 10px;
  }
}
.formBox {
  height: 100vh;
  background-color: #e9e9e9;
  padding-right: 20px;
  box-sizing: border-box;
  padding-top: 50px;
  display: flex;
  justify-content: center;
}
form {
  width: 400px;
}
</style>